<template><div><h3 id="_1-简介" tabindex="-1"><a class="header-anchor" href="#_1-简介" aria-hidden="true">#</a> 1 简介</h3>
<p>CSS定义背景属性的标签有：</p>
<ul>
<li><code v-pre>background-color</code></li>
<li><code v-pre>background-image</code></li>
<li><code v-pre>background-repeat</code></li>
<li><code v-pre>background-attachment</code></li>
<li><code v-pre>background-position</code></li>
<li><code v-pre>background-size</code></li>
<li><code v-pre>background-origin</code></li>
<li><code v-pre>background-clip</code></li>
</ul>
<h3 id="_2-background-color" tabindex="-1"><a class="header-anchor" href="#_2-background-color" aria-hidden="true">#</a> 2 background-color</h3>
<p><code v-pre>background-color</code>用来定义元素的背景颜色，其颜色取值可以设定以下格式。</p>
<ul>
<li>十六进制，如<code v-pre>#ff0000</code></li>
<li>RGB，如<code v-pre>rgb(255,0,0)</code></li>
<li>颜色名称，如<code v-pre>red</code></li>
</ul>
<h3 id="_3-background-image" tabindex="-1"><a class="header-anchor" href="#_3-background-image" aria-hidden="true">#</a> 3 background-image</h3>
<p><code v-pre>background-image</code>用于设定元素的背景图片，默认情况下图片平铺重复显示，覆盖整个元素。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">body</span> <span class="token punctuation">{</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./image.png<span class="token punctuation">)</span></span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-background-repeat" tabindex="-1"><a class="header-anchor" href="#_4-background-repeat" aria-hidden="true">#</a> 4 background-repeat</h3>
<p><code v-pre>background-repeat</code>用于设置背景图片沿着X轴和Y轴平铺。其取值如下：</p>
<ul>
<li>repeat(默认)：沿着X轴和Y轴平铺。</li>
<li>repeat-x：沿着X轴平铺。</li>
<li>repeat-y：沿着Y轴平铺。</li>
<li>no-repeat：不进行平铺。</li>
</ul>
<h3 id="_5-background-attachment" tabindex="-1"><a class="header-anchor" href="#_5-background-attachment" aria-hidden="true">#</a> 5 background-attachment</h3>
<p><code v-pre>background-attachment</code>用于设置背景图片是否固定或者随页面滚动。其取值如下：</p>
<ul>
<li>scroll(默认)：背景图片随页面滚动。</li>
<li>fixed：背景图片固定。</li>
<li>inherit：继承父元素<code v-pre>background-attachment</code>值。</li>
<li>local：背景图片随元素滚动。</li>
</ul>
<h3 id="_6-background-position" tabindex="-1"><a class="header-anchor" href="#_6-background-position" aria-hidden="true">#</a> 6 background-position</h3>
<p><code v-pre>background-position</code>用于设置背景图片的起始位置。</p>
<p>语法</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span> horizontal vertical
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>水平取值</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>percentage | length | left | center | right
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>垂直取值</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>percentage | length | top | center | bottom
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>可以只写一个关键字，则另外一个默认<code v-pre>center</code>。</p>
<p>例如：<code v-pre>background-position: left</code> 其代表了<code v-pre>background-position left center</code></p>
<p>设置百分比时是以背景图片中心对齐。例如，如果要设置背景图像在元素中居中，则可以通过以下代码实现。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span> 50% 50%
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置像素值时是图像左上角相对元素左上角的偏移距离。</p>
<p>像素值和百分比可以混合使用。</p>
<h3 id="_7-background-size" tabindex="-1"><a class="header-anchor" href="#_7-background-size" aria-hidden="true">#</a> 7 background-size</h3>
<p><code v-pre>background-size</code>用来设置背景图像的大小。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-size</span><span class="token punctuation">:</span> length | percentage | cover | contain
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul>
<li>length：设置图像的宽度和高度，可以仅设置第一个值，则第二个默认为auto，auto表示保持原图横纵比例。</li>
<li>percentage：设置图像相对于元素的百分比大小，可以仅设置第一个值，则第二个默认为auto。</li>
<li>cover：保持图像的横纵比，按照较短边填充，溢出部分被隐藏。</li>
<li>contain：保持横纵比，按照较长边填充，空白部分填充背景色。</li>
</ul>
<h3 id="_8-background-origin" tabindex="-1"><a class="header-anchor" href="#_8-background-origin" aria-hidden="true">#</a> 8 background-origin</h3>
<p><code v-pre>background-origin</code>设置背景图像显示区域，也是<code v-pre>background-position</code>的定位原点。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-origin</span><span class="token punctuation">:</span> padding-box | border-box | content-box
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul>
<li>padding-box(默认)：从padding的外边缘开始显示背景图片。</li>
<li>border-box：从border的外边缘开始显示背景图片。</li>
<li>content-box：从content的外边缘开始显示背景图片。</li>
</ul>
<h3 id="_9-background-clip" tabindex="-1"><a class="header-anchor" href="#_9-background-clip" aria-hidden="true">#</a> 9 background-clip</h3>
<p><code v-pre>background-clip</code>用于设置图像的裁剪范围。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-clip</span><span class="token punctuation">:</span> border-box | padding-box | content-box
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul>
<li>border-box(默认)：超出border区域的图像将被剪裁。</li>
<li>padding-box：超出padding区域的图像将被剪裁。</li>
<li>content-box：超出content区域的图像将被剪裁。</li>
</ul>
<h3 id="_10-background" tabindex="-1"><a class="header-anchor" href="#_10-background" aria-hidden="true">#</a> 10 background</h3>
<p><code v-pre>background</code>用于简写顺序。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background</span><span class="token punctuation">:</span> [color] [image] [repeat] [attachment] [position]
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>以上属性无需全部使用，根基需要使用。</p>
<h3 id="_11-多背景图像" tabindex="-1"><a class="header-anchor" href="#_11-多背景图像" aria-hidden="true">#</a> 11 多背景图像</h3>
<p>不同背景图像之间用逗号隔开，所有的图片显示在顶端的为第一张。</p>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>image1.png<span class="token punctuation">)</span></span> 属性，<span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>image2.png<span class="token punctuation">)</span></span> 属性
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div></template>
